<script setup lang="ts">
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetWorkingPeriodList } from '@/api/base/workCalendar/workingHours/index';
import { generateNameToLevel } from '@/config/constant';
import { handleHoursRender } from '@/views/Base/WorkCalendar/common';

import type { WorkingHours } from '@/api/base/workCalendar/workingHours/model/type';

const { getMaxHeight, modalSlotRef } = useModal();

/**
 * @: 内部弹框相关
 * @param {*} ref
 * @return {*}
 */
const visible = ref(false);
const open = () => {
    visible.value = true;
};

/**
 * @: 点击当前行选中并关闭
 * @param {*} defineEmits
 * @return {*}
 */
const emit = defineEmits(['update']);
const rowClick = (row: WorkingHours) => {
    const periodDesc = `${row.name}: ${handleHoursRender(row)}`;
    emit('update', periodDesc, row.id);
    visible.value = false;
};

const router = useRouter();
const toLink = () => {
    visible.value = false;
    router.push('/workCalendar/workingHours');
};

defineExpose({
    open
});
</script>
<template>
    <q-modal v-model:visible="visible" :footer="false" title="工作时段" width="850px">
        <base-search
            ref="searchRef"
            :table-ref="modalSlotRef"
            :search-config="searchConfig"
            :close-min-width="true"
            :is-close-open="true"
        >
            <template v-slot:other>
                <div class="push-align--right">
                    <q-push-button :is-text="false" @click="toLink" />
                </div>
            </template>
        </base-search>
        <base-table
            :id="generateNameToLevel('2')"
            ref="modalSlotRef"
            class="modal-base-table"
            :max-height="getMaxHeight"
            :modal-mode="true"
            :show-setting="false"
            :get-data-fn="doGetWorkingPeriodList"
            :table-config="tableConfig"
            @row-click="rowClick"
        >
            <template #workingHours="{ row }">{{ handleHoursRender(row) }} </template>
        </base-table>
    </q-modal>
</template>

<style scoped lang="scss">
@include b(modal-base-table) {
    :deep(.el-table__row) {
        height: 45px !important;
    }
}
</style>
